<template>
    <div>
        <div class="page-title">订单协调</div>
        <div class="container">
            <div class="box">
                <div class="info">
                    <div>
                        <p class="order">订单号：{{other.ddh}}</p>
                        <p class="text-muted">创建时间：{{other.create_time}}</p>

                    </div>
                    <div class="pass">
                        <el-button type="text" @click="showKm">此订单卡密</el-button>
                    </div>
                </div>
                <div class="head">
                    <div class="usr">
                        <img src="../../assets/imgs/seller-img.png" alt="">
                        <div>
                            <p>商户ID:</p>
                            {{other.maijia_id}}
                        </div>
                    </div>

                    <div class="status">
                        <div>订单金额：{{(other.chengjiao_zongjia / 100).toFixed(2)}} 元</div>
                        <div>处理状态：{{other.shouhou_zhuangtai | statuStr}}</div>
                    </div>
                </div>
                <div class="content" ref="content">
                    <div class="m-b chat-status">
                        <el-alert type="success" center v-if="isConnect">连接成功</el-alert>
                        <el-alert type="error" center v-else :closable="false">连接失败</el-alert>
                    </div>
                    <template v-for="(item,index) in chatList">
                        <div class="chat-item" v-if="item.xiaoxi_guishu !== 3"
                             :class="{end:item.xiaoxi_guishu == userInfo.type}">
                            <div class="user">
                                <img :src="item.xiaoxi_guishu == userInfo.type ? $store.getters.user.touxiang : defultTx"
                                     alt="">


                            </div>

                            <div class="text" v-if="item.xiaoxi_zhuangtai === 1"
                                 v-html="item.msg || item.xiaoxi_neirong">
                                <!--{{item.msg || item.xiaoxi_neirong}}-->
                            </div>
                            <el-image fit="contain" v-else :src="item.msg || item.xiaoxi_neirong"></el-image>

                        </div>
                        <div class="reject text-center text-muted time" v-if="!(index % 5)">{{item.update_time}}</div>
                        <div class="reject text-center text-muted m-t-lg m-b sysMsg" v-if="item.xiaoxi_guishu === 3">
                            <i class="el-icon-warning-outline"></i>系统消息：
                            <span xx="sss" v-html="item.msg || item.xiaoxi_neirong"></span>
                        </div>
                    </template>


                </div>
                <div class="input">
                    <i class="el-icon-picture-outline img m-r-xs" @click="upImg"></i>
                    <input type="textarea" placeholder="请输入..." @keydown.enter="sendMsg" v-model="msg">
                    <el-button type="primary" size="small" :disabled="!isConnect" @click="sendMsg">发送</el-button>
                </div>

                <div class="concat ">
                    <img src="../../assets/imgs/concat.png" alt="">
                </div>
            </div>


            <!-- 图片上传组件辅助-->
            <el-upload
                    class="chat-uploader"
                    action="/public/index.php/api/user/liaotian_tupian_up"
                    name="image"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    :before-upload="beforeAvatarUpload">
            </el-upload>

            <!--发送图片窗口-->
            <el-dialog
                    title="发送图片"
                    :visible.sync="dialogVisible"
                    class="text-center"
                    width="30%"
            >
                <el-image fit="contain" :src="chatImg"></el-image>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sendPic">发送</el-button>
                 </span>
            </el-dialog>

            <!--查看卡密-->
            <!--卡密dialog-->
            <el-dialog
                    title="查看卡密"
                    :visible.sync="passDialog"
                    width="30%"
                    class="km"
            >
                <div>
                    <div v-for="item in kami_xinxi" class="m-b">
                        <div>卡号：{{item.kahao}}</div>
                        <div>卡密：{{item.kami}}</div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="passDialog = false">取 消</el-button>
                     <el-button type="primary" @click="passDialog = false">确 定</el-button>
                 </span>
            </el-dialog>


        </div>
    </div>
</template>

<script>
    import defultTx from '../../assets/imgs/seller-img.png';
    import mixins from '../../mixin'

    export default {
        name: 'chat',
        components: {},
        mixins: [mixins],
        data() {
            return {
                userInfo: {
                    id: '',
                    type: ''
                },
                token: '',
                pageLoading: false,
                chatList: [],
                socket: null,
                msg: '',
                isConnect: false,
                defultTx: defultTx,
                other: {},
                chatImg: '',
                dialogVisible: false,
                kami_xinxi: [],
                passDialog: false
            }
        },
        computed: {},
        filters: {
            statuStr(val) {
                let obj = {
                    2: '买家申请售后，等待卖家处理',
                    3: '卖家拒绝退款请求，请修改退款申请',
                    4: '退款已取消',
                    5: '卖家已同意退款',
                }
                return obj[val];
            }
        },
        methods: {
            //上传图片
            uploadSuccess(res) {
                if (res.code === `200`) {
                    this.chatImg = res.data.xiaoxi_neirong;
                    this.dialogVisible = true;
                }

                this.quillUpdateImg = false
            },
            //上传图片
            upImg() {
                document.querySelector('.chat-uploader input').click()
            },
            //显示卡密
            showKm() {
                this.kami_xinxi = this.other.kami_xinxi;
                this.passDialog = true;

            },
            //发送消息
            sendMsg() {
                let msg = {
                    token: this.token,
                    code: 1,
                    xiaoxi_guishu: this.userInfo.type,
                    msg: this.msg
                };
                if (this.msg && this.isConnect) {
                    this.socket.emit('sendMsg', JSON.stringify(msg));
                    this.msg = '';
                }

            },
            //发送图片
            sendPic() {
                let msg = {
                    token: this.token,
                    code: 2,
                    xiaoxi_guishu: this.userInfo.type,
                    msg: this.chatImg
                };
                if (this.isConnect) {
                    this.socket.emit('sendMsg', JSON.stringify(msg));
                    this.chatImg = '';
                    this.dialogVisible = false;
                }
            },

            //获取聊天token
            getChatToken() {
                this.pageLoading = true;
                let url = this.userInfo.type === '1' ? '/api/user/get_token' : '/api/shanghu/get_token';
                return new Promise(resolve => {
                    this.$axios.post(url, {ddh: this.userInfo.id})
                        .then(res => {
                            if (res.code === `200`) {
                                this.token = res.data.token;
                                this.other = res.data.duifang_data
                                resolve();
                            }
                        }).finally(() => {
                        this.pageLoading = false;
                    })
                })
            },
            //获取聊天记录
            getHistory(first) {
                let url = this.userInfo.type === '1' ? '/api/user/huoqu_liaotian' : '/api/shanghu/huoqu_liaotian';
                this.$axios.post(url, {ddh: this.userInfo.id, page: this.page})
                    .then(res => {
                        if (res.code === '200') {
                            this.chatList = (res.data.liaotian_data);
                            this.$nextTick(() => {
                                first && this.goBottom();
                            })

                        }
                    })
            },
            //滚动到底部
            goBottom() {
                if (this.$refs.content) {
                    this.$refs.content.scrollTop = this.$refs.content.scrollHeight
                }

            }

        },
        async mounted() {
            this.userInfo = this.$route.query;
            await this.getChatToken();
            const socket = io.connect('http://www.1cuntao.com:2021');
            this.socket = socket;
            socket.on('connect', () => {
                this.isConnect = true;
                let str = {token: this.token};
                socket.emit('Login', JSON.stringify(str))


            });

            this.getHistory(true);


            socket.on('Login', (msg) => {
            });
            socket.on('error', (msg) => {
            });
            let _this = this;
            socket.on('sendMsg', function (msg) {
                let data = JSON.parse(msg);
                if (data.code === `200`) {
                    data.update_time = new Date();
                    _this.chatList.push(data.data);
                    _this.$nextTick(() => {
                        _this.goBottom();
                    })
                }
            });


        },
        beforeRouteEnter(to, from, next) {
            if (to.query.type) {
                next()
            } else {
                next(false)
            }

        }
    }
</script>

<style lang="less" scoped>
    .container {

        .box {
            position: relative;
            width: 950px;
            margin: 20px auto;
            // border: 1px solid #f5f5f5;
            .info {
                display: flex;
                justify-content: space-between;

                .order {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }

                margin-bottom: 20px;
            }

            .head {
                background-color: #386CFA;
                padding: 15px 20px;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .usr {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    font-weight: bold;

                    img {
                        width: 65px;
                        border-radius: 50%;
                        margin-right: 15px;
                    }
                }

            }

            .chat-status {
                position: absolute;
                left: 15px;
                right: 15px;
                top: 167px;
                z-index: 666;
            }

            .content {
                border: 1px solid #f5f5f5;
                padding: 15px 20px;
                height: 450px;
                overflow: scroll;

                .chat-item {
                    display: flex;
                    align-items: center;
                    text-align: center;
                    margin-bottom: 15px;
                    position: relative;

                    .time {
                        position: absolute;
                        left: 43%;
                    }

                    img {
                        width: 55px;
                        border-radius: 50%;
                        margin-right: 15px;
                    }

                    .text {
                        background-color: #F8F9FC;
                        padding: 15px;
                        border-radius: 10px;
                        max-width: 50%;
                    }

                    /deep/ .el-image {
                        max-width: 300px;
                        border: 1px solid #eee;
                        padding: 2px;
                        border-radius: 5px;
                        cursor: pointer;
                        min-height: 230px;
                    }

                    &.end {
                        justify-content: flex-end;

                        .user {
                            order: 2
                        }

                        .text {
                            order: 1;
                            margin-right: 15px;
                            background-color: #386CFA;
                            color: white;
                        }
                    }
                }

            }

            .input {
                padding: 15px 20px;
                border: 1px solid #f5f5f5;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
                display: flex;
                align-items: center;
                margin-left: ;
                justify-content: space-between;

                input {
                    border: none;
                    outline: none;
                    flex: auto;
                }

                .img {
                    cursor: pointer;

                    &:hover {
                        color: #5cb6ff
                    }
                }
            }
        }

        .concat {
            text-align: right;
            position: absolute;
            right: -120px;
            cursor: pointer;
            bottom: 35px;
        }
    }

</style>
